﻿@{
    ViewBag.Title = "Pending Approval";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>
<hr />
<section id="openLogsGrid">

</section>
@section scripts{
    @Scripts.Render("~/bundles/jqueryMask")
<script>
    $(document).ready(function () {
        dataSource = new kendo.data.DataSource({
            transport: {
                read: "@Url.Action("OpenLogs","Manage",null)",
                //success: function (data) {
                //    alert(data);
                //},
                error: function (xhr, error) {
                    console.debug(xhr); console.debug(error);
                },
                update: {
                    url: "@Url.Action("Approve", "Manage", new { id=1 })",
                    dataType: "json",
                    type: "POST",
                    complete:updateResponse
                },
                create: {
                    url: "@Url.Action("add","Manage",null)",
                    dataType: "jsonp"
                }
            },
                           parameterMap: function(options, operation) {
                                   if (operation !== "read" && options.models) {
                                       return {models: kendo.stringify(options.models)};
                                   }
                               },
                               batch: true,
                               pageSize: 10,
                           schema: {
                               model: {
                                   id: "punchId",
                                   fields: {
                                       punchId: { editable: false, type: "number" },
                                       punchDate: { type: "date", validation: { required: true } },
                                       punchIn: { type: "time", validation: { required: true } },
                                       punchOut: { type: "time", validation: { required: true } },
                                       HoursNew: { type: "string", validation: { required: false } }

                                   }
                               },
                               parse: function (response) {
                                   $.each(response, function (idx, elem) {
                                       elem.punchIn = UTCToClientLocal(elem.punchIn.Hours + ":" + elem.punchIn.Minutes + ":" + elem.punchIn.Seconds);
                                       elem.punchOut = UTCToClientLocal(elem.punchOut.Hours + ":" + elem.punchOut.Minutes + ":" + elem.punchOut.Seconds);
                                       //elem.punchDate = UTCDateToClientLocalDate(elem.punchDate);
                                       elem.HoursNew = MinutesToTime(elem.Hours);
                                       elem.Hours = elem.Hours;
                                   });
                                   return response;
                               }
                           },
                           group: {
                               field: "EmployeeName", editable: false, aggregates: [
                                   { field: "punchId", aggregate: "count" },
                                  { field: "punchDate", aggregate: "count" },
                                  { field: "punchIn", aggregate: "count" },
                                  { field: "punchOut", aggregate: "count" },
                                  { field: "HoursNew", aggregate: "count" }
                               ]
                           }
                       });

        $("#openLogsGrid").kendoGrid({
            dataSource:  dataSource,
            sortable: true,
            groupable: true,
            //filterable: true,
            pageable: {
                refresh: true,
                pageSizes: true,
                buttonCount: 5
            },
            //toolbar: ["create"],
            edit: function (e) {
                e.sender.editable.validatable._errorTemplate = 
                     kendo.template($('#tooltip-template').html());
            },
            columns: [{
                field: "EmployeeName",
                title: "Employee",
                editor: nonEditableEditor
            }, {
                field: "isManagerAccepted",
                title: "Approved",
                hidden: true,
                editor: checkBoxEditor
            }, {
                field: "punchDate",// create a column bound to the "name" field
                title: "Date", // set its title to "Name"
                type: "date",
                format: "{0:dd-MMM-yyyy}",
                parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"]
               // editor: nonEditableEditor
            }, {
                field: "punchIn",// create a column bound to the "age" field
                title: "In-Time", // set its title to "Age"
                format: "{0:hh:mm:ss tt}",
                editor: timeEditor
            },{
                field: "punchOut",// create a column bound to the "age" field
                title: "Out-Time", // set its title to "Age"
                format: "{0:hh:mm:ss tt}",
                editor: timeEditor
            },{
                field: "HoursNew",// create a column bound to the "age" field
                title: "Hours", // set its title to "Age"
                editor: nonEditableEditor
            }, {
                field: "comments",
                title: "Comments"
            }, {
                command: ["edit"],
                title: "&nbsp;",
                width: "85px"
            }],
            editable: "popup"
        });
    });

    function timeEditor(container, options) {
        $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                .appendTo(container)
                .kendoTimePicker({ });
    }
    function checkBoxEditor(container, options) {
        $('<input data-text-field="' + options.field + '" name="' + options.field + '" type="checkbox" checked "  data-value-field="' + options.field + '" data-bind="value:true" data-format="' + options.format + '"/>')
                .appendTo(container);
    }
    function hiddenEditor(container, options) {
        $('<input type="hidden" data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                .appendTo(container);
    }

    function nonEditableEditor(container, options) {
        //console.log(options);
        if (options.field == "HoursNew") {
            $('<label for="' + options.field + '" style="margin-top: 6px;" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '">' + options.model.HoursNew + '</label>'
                + '<input type="hidden" data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>'
                + '<input type="hidden" data-text-field="' + "Hours" + '" data-value-field="' + "Hours" + '" data-bind="value:' + "Hours" + '" data-format="' + options.format + '"/>')
                    .appendTo(container);
        }
        else if (options.field == "EmployeeName") {
            $('<label for="' + options.field + '" style="margin-top: 6px;" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '">' + options.model.EmployeeName + '</label>')
                    .appendTo(container);
        }
        else if (options.field == "punchDate") {
            $('<label for="' + options.field + '" style="margin-top: 6px;" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '">' + options.model.punchDate + '</label>')
                    .appendTo(container);
        }
    }

</script>
    }

<script id="tooltip-template" type="text/x-kendo-template">
    <span class = "k-widget k-tooltip k-tooltip-validation k-invalid-msg" > <span class = "k-icon k-warning" > </span>#=message#</span>
</script>